<template>
    <div>
        <div class="content">
            <!-- 今日情况 -->
            <div class="today flex justify-between">
                <div class="work flex flex-col justify-center items-center w-46"
                    :style="{ boxShadow: getBoxShadow('') }">
                    <p>今日工作量</p>
                    <div class="work_cont">
                        <p>样本采集：0个</p>
                        <p>DNA提取：0个</p>
                        <p>样本检测：0个</p>
                    </div>
                </div>
                <div class="result flex flex-col justify-center items-center w-46"
                    :style="{ boxShadow: getBoxShadow('') }">
                    <p>今日检测结果</p>
                    <div class="result_cont">
                        <p>smn_17阳性：0个</p>
                        <p>smn_18阳性：0个</p>
                        <p>检测结果阳性：0个</p>
                    </div>
                </div>
                <div class="refrigerator flex flex-col justify-center items-center w-46"
                    :style="{ boxShadow: getBoxShadow('') }">
                    <p>冰箱数量：0台</p>
                    <div class="refrigerator_cont">
                        <p>冻存架个数：0个</p>
                        <p>冻存盒个数：0个</p>
                        <p>冻存架总孔数：0个</p>
                    </div>
                </div>
                <div class="mount flex flex-col justify-center items-center w-46"
                    :style="{ boxShadow: getBoxShadow('') }">
                    <p>样本总数量：0个</p>
                    <div class="mount_cont">
                        <p>容器占用率：0%</p>
                        <p>样本阳性率：0%</p>
                        <p>今日阳性率：0%</p>
                    </div>
                </div>
            </div>
            <!-- 中间空白 -->
            <div class="box2 flex flex-col justify-center items-center m-auto w-46">
            </div>
            <!-- 左空右图 -->
            <div class="box3">
                <div class="left flex flex-col justify-center items-center m-auto w-46"></div>
                <div class="right flex flex-col justify-center items-center m-auto w-46"
                    v-for="(shadow, i) in shadowGroup" :key="i">
                    <h4>容器容错率</h4>
                    <el-progress type="dashboard" :percentage="percentage" :color="colors" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const percentage = ref(10)
const percentage2 = ref(0)

const shadowGroup = ref([
    {
        name: 'Basic Shadow',
        type: '',
    }
])

const getCssVarName = (type: string) => {
    return `--el-box-shadow${type ? '-' : ''}${type}`
}

const colors = [
    { color: '#f56c6c', percentage: 20 },
    { color: '#e6a23c', percentage: 40 },
    { color: '#5cb87a', percentage: 60 },
    { color: '#1989fa', percentage: 80 },
    { color: '#6f7ad3', percentage: 100 },
]

const getBoxShadow = (type: string) => {
    return `var(${getCssVarName(type)}) 0 2px 12px 0 rgba(0, 0, 0, 0.1)`
}

onMounted(() => {
    setInterval(() => {
        percentage2.value = (percentage2.value % 100) + 10
    }, 500)
})
</script>

<style scoped>
.content {
    margin: 0;
    padding: 0;
}

.today {
    width: 100%;
    padding: 10px 0;
    display: flex;
}

.today .work,
.today .result,
.today .refrigerator,
.today .mount,
.box2,
.left,
.right {
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

.work,
.result,
.refrigerator,
.mount {
    width: 25%;
    margin-right: 15px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.mount {
    margin-right: 0px;
}

/* 今日字体样式 */
.today p {
    color: #17b3a3;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;
    width: 100%;
    /* padding: 5px; */
}

/* 内容区域样式 */
.today .work_cont p {
    color: green;
    border-bottom: none;
    text-align: left;
    padding-bottom: 0;
    margin-bottom: 0;
}

.today .result_cont p {
    color: orange;
    border-bottom: none;
    text-align: left;
    padding-bottom: 0;
    margin-bottom: 0;
}

.today .refrigerator_cont p,
.today .mount_cont p {
    color: #000;
    border-bottom: none;
    text-align: left;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* 中间空白 */
.box2 {
    height: 50vh;
    margin-bottom: 15px;
}

/* 底部 */
.box3 {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.left,
.right {
    width: 50%;
    margin-right: 15px;
}

.right {
    margin-right: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>